<template>
	<view class="content">
		<!-- 位置信息 -->
		<view class="info-view">
			<view class="info-title">{{ detailInfo.name }}</view>
		</view>
		<!-- 详情介绍 -->
		<view class="descriotion-view">
			<rich-text :nodes="detailInfo.interestingManageDesc" class="fload"></rich-text>
		</view>
		<!-- 周边推荐 -->
		<view class="recommend-view">
			<view class="recommend-title">周边推荐</view>
			<view class="list-content">
				<view class="item-list" v-for="(item, index) in recommendList" :key="item.id" @click="clickRecommend(item)">
					<image mode="widthFix" :src="item.pics[0].objKey" class="item-image"></image>
					<view class="item-title">{{ item.locationName }}</view>
					<!-- <view class="item-desc">{{ item.introduction }}</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getInterestDetail } from '@/api/index.js';
export default {
	components: {},
	data() {
		return {
			id: '',
			recommendList: [],
			detailInfo: {}
		};
	},
	mounted() {},
	onLoad(data) {
		this.id = data.id;
		console.log('id:', this.id);
		this.getDetails(this.id);
	},
	methods: {
		getDetails(id) {
			let that = this;
			this.myImgList = [];
			uni.showLoading({});
			getInterestDetail(id).then((res) => {
				uni.hideLoading();
				console.log('res', res);
				if (res.data && res.code === 200) {
					that.detailInfo = res.data;
					that.recommendList = res.data.locationList;
				}
			});
		},
		clickRecommend(item) {
			const id = item.id;
			uni.navigateTo({
				url: `/pages/map/mapDetail?id=` + id
			})
		}
	}
};
</script>

<style>
page {
	height: 100%;
	position: relative;
}
.content {
	width: 100%;
	height: 100%;
	background-color: #fff;
}
.info-view {
	background-color: white;
}
.info-title {
	font-size: 36rpx;
	color: #137576;
	text-align: center;
	padding-top: 20rpx;
}
.descriotion-view {
	background-image: url("https://nownc178.cq4oss.ctyunxs.cn/index/kuang.png");
	background-size: 100%;
	margin: 40rpx;
	padding: 30rpx;
}
.recommend-view {
	background-color: white;
	margin: 10px 0;
	border-top: 3px solid #efefef;
}

.recommend-title {
	margin-left: 40rpx;
	padding-top: 30rpx;
	font-size: 36rpx;
	color: #f0880d;
}
.list-content {
	padding: 30rpx;
	box-sizing: border-box;
	column-count: 2;
}
.item-list {
	break-inside: avoid;
	width: 330rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
}
.item-image {
	width: 100%;
	border-radius: 10rpx;
}
.item-title {
	padding: 20rpx;
	font-size: 30rpx;
	font-weight: bold;
}
</style>
